<script>
import { getOptions } from "@/api/robot/task";
import { globalLoading, isNull } from "@/utils/service";
import { create, getParam, update } from "@/api/robot/robotTaskAdPushUnit";

export default {
  name: "edit",
  data() {
    return {
      options: {
        task: {
          data: [],
          loading: true,
          loadingText: "加载中....."
        },
        taskMap: {
          "views/robotOffice/task/am-ztc-yh": () => import("@/views/robotOffice/task/am-ztc-yh.vue"),
          "views/robotOffice/task/sycm-search-goodKey": () => import("@/views/robotOffice/task/sycm-search-goodKey.vue"),
          "views/robotOffice/task/sycm/competingGoodKey": () => import("@/views/robotOffice/task/sycm/competingGoodKey.vue"),
          "views/robotOffice/task/sycm/industryGoodKey": () => import("@/views/robotOffice/task/sycm/industryGoodKey.vue"),
          "views/robotOffice/task/sycm/findMarketRank": () => import("@/views/robotOffice/task/sycm/findMarketRank.vue"),
          "views/robotOffice/task/operationAid/industryGoodKey": () => import("@/views/robotOffice/task/operationAid/industryGoodKey.vue"),
          "views/robotOffice/task/sycm/trafficSource": () => import("@/views/robotOffice/task/sycm/trafficSource.vue"),
          "views/robotOffice/task/sycm/store/taoBaoDailyData": () => import("@/views/robotOffice/task/sycm/store/taoBaoDailyData.vue"),
          "views/robotOffice/task/sycm/store/pddDailyData": () => import("@/views/robotOffice/task/sycm/store/pddDailyData.vue"),
          "views/robotOffice/task/sycm/competitorProduct": () => import("@/views/robotOffice/task/sycm/competitorProduct.vue"),
          'views/robotOffice/task/sycm/productDetails' : () => import("@/views/robotOffice/task/sycm/productDetails.vue"),
          'views/robotOffice/task/tb/product/productSkuMonitor': () => import("@/views/robotOffice/task/tb/product/productSkuMonitor.vue"),
          'views/robotOffice/task/tb/product/sycmMarketRankItem': () => import("@/views/robotOffice/task/tb/product/sycmMarketRankItem.vue"),
        }
      },
      select: {
        nowTaskComponent: undefined
      },
      form: {
        id: undefined,
        name: "",
        robotTaskId: undefined,
        params: undefined
      },
      dialog: {
        loading: true,
        show: false,
        title: "新建发布单元"
      }
    };
  },
  methods: {
    isNull,
    createHandler() {
      this.form.id = undefined
      this.form.name = ""
      this.form.robotTaskId = undefined
      this.form.params = undefined
      this.select.nowTaskComponent = undefined
      this.dialog.show = true;
      this.dialog.title = "新建发布单元";
    },
    updateHandler(row) {
      this.form.id = row.id;
      this.form.robotTaskId = row.robotTaskId;
      this.form.name = row.name;
      this.dialog.show = true;
      this.dialog.title = "修改发布单元";
    },
    getOptionsReq() {
      this.options.task.loading = true;
      getOptions().then(r => {
        this.options.task.data = r;
      }).catch(e => {
        console.log(e);
      }).finally(() => {
        this.options.task.loading = false;
      });
    },
    async getParamReq(id) {
      let result;
      await getParam(id).then(r => {
        result = r;
      }).catch(e => {
        this.$message.error("加载单元参数时失败");
        console.log(e);
      });
      return result;
    },
    taskChange(v) {
      if (!v){
        this.select.nowTaskComponent = undefined
        return;
      }
      let item = this.options.task.data.find(item => item.id === v);
      if (!item) {
        this.$message.error("加载任务界面失败");
        return;
      }
      this.select.nowTaskComponent = isNull(v) ? undefined : this.options.taskMap[item.viewRouter];
    },
    commitTask() {
      let temp = this.$refs.taskView;
      if (!temp.checkParam()) {
        return;
      }
      let f = this.form;
      if (isNull(f.name)) {
        this.$message.error("请输入单元名称");
        return;
      } else if (f.name.length < 2) {
        this.$message.error("单元名称至少有 2 个 字符");
        return;
      }
      let reqData = {
        id: this.form.id,
        name: this.form.name,
        robotTaskId: this.form.robotTaskId,
        param: JSON.stringify(this.$refs.taskView.getParam())
      };
      let loading = globalLoading(this);
      let _ = this;
      let successFuc = function(r) {
        _.$message.success("提交成功");
        _.dialog.show = false;
        _.$emit("refreshTable");
      };
      let finallyFuc = function() {
        loading.close();
      };
      if (this.form.id) {
        update(reqData).then(successFuc).finally(finallyFuc);
      } else {
        create(reqData).then(successFuc).finally(finallyFuc);
      }
    },
    opened() {
      let _ = this;
      let loading = globalLoading(this);
      try {
        if (this.form.id) {
          this.taskChange(this.form.robotTaskId);
          this.getParamReq(this.form.id).then(r => {
            _.$refs.taskView.initParams(JSON.parse(r));
          });
        }
      } catch (err) {
        console.error(err.message);
      } finally {
        loading.close()
      }
    }
  }
};
</script>

<template>
  <div>
    <el-dialog
      @opened="opened"
      @open="getOptionsReq"
      :close-on-click-modal=false
      :title="dialog.title"
      :visible.sync="dialog.show"
      width="50%"
    >
      <div>
        <el-select
          @change="taskChange"
          :loading="options.task.loading"
          :loading-text="options.task.loadingText"
          clearable
          filterable
          value-key="id"
          size="mini"
          style="width: 100%;margin-bottom: 10px"
          v-model="form.robotTaskId"
          placeholder="请选择需要发布的任务"
        >
          <el-option
            v-for="item in options.task.data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div v-show="!isNull(select.nowTaskComponent)">
        <div style="margin: 5px 0">
          <span style="margin-right: 10px;font-weight: bold">单元名称 : </span>
          <el-input style="width: 80%" size="mini" v-model="form.name" placeholder="请输入单元名称"></el-input>
        </div>
        <el-card style="overflow-y: auto;max-height: 55vh">
          <component
            ref="taskView"
            :is="select.nowTaskComponent"
          >
          </component>
        </el-card>
        <div style="text-align: center;margin-top: 10px">
          <el-button type="info" @click="$emit('closeDialog')">取消</el-button>
          <el-button type="primary" @click="commitTask">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>